<template>
  <uni-popup ref="popup" class="get-phone-dialog" type="center" :maskClick="false">
    <view class="get-phone-dialog-content">
      <view class="content-wrapper">
        <view class="title">微信授权成功</view>
        <view class="content">授权绑定您的手机号码</view>
      </view>
      <view class="btn-group">
        <button class="btn-item default" plain @click="$emit('cancel')">拒绝</button>
        <!-- <we-button class="btn-item" type="info" @click="$emit('cancel')">拒绝</we-button> -->
        <button class="btn-item primary" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >允许</button>
      </view>
    </view>
	</uni-popup>
</template>

<script>
import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue"
export default {
  name: 'get-phone-dialog',
  components: { uniPopup },
  data() {
    return {
    }
  },
  methods: {
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    getPhoneNumber(e) {
      console.log('允许使用手机号：', e)
      if (e.detail && e.detail.iv) {
        this.$emit('confirm', {
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData
        })
      } else {
        this.$emit('cancel')
      }
      this.close()
    }
  }
}
</script>

<style lang="less">
.get-phone-dialog {
  .get-phone-dialog-content {
    background:#fff;
    border-radius:8px;
    width: 648rpx;
    box-sizing: border-box;

    .content-wrapper {
      padding: 100rpx 0;
      text-align: center;
    }

    .title {
      font-size: 36rpx;
      // color: @FONT_COLOR;
      // .font-bold;
      margin-bottom: 10rpx;
    }

    .content {
      font-size: 30rpx;
      // color: @FONT_LIGHTER_COLOR;
    }
    .btn-group {
      // border-top: 1rpx solid @BORDER_COLOR;
      .flex;
      .flex-between;
      .btn-item {
        .flex-1;
        .flex;
        .flex-middle;
        .flex-center;
        height: 100rpx;
        &.default {
          border: none;
          // border-right: 1rpx solid @BORDER_COLOR;
          // color: @FONT_COLOR;
        }
        &.primary {
          border: none;
          color: #42b983;
        }
      }
    }
  }
}
</style>
